body, html {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: rgb(85, 85, 85);
  height: 100%;
}

#top-bar{
  padding: 5px 0 10px 15px;
  background-color: #f1f1f1;
  border-bottom: #e8e8e8 solid 1px;
}

#top-bar img {
  vertical-align:middle;
  margin-right: 7px;
}

#top-bar h1 {
  margin: 0;
}

#overlay{
  position: absolute;
  width: 500px;
  height: 120px;
  top: 0;
  right: 0;
  background-image: url(/assets/fern_leaf.png);
  background-repeat:no-repeat;
  background-position:0 -270px;
  background-size: 100%;
}

.sidebar {
  height: 100%;
  width: 220px;
  position: fixed;
  overflow: hidden;
  -webkit-transition: width .3s ease-in-out;
  -moz-transition: width .3s ease-in-out;
  -o-transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}

.sidebar.collapsed {
  width: 35px;
}

.sidebar .expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 4px;
  line-height: 14px;
}

.sidebar-top-spacer{
  height: 20%;
}

.sidebar-border-top {
  width: 1px;
  height: 100%;
  background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
  float: right;
}

.sidebar-border-bottom {
  width: 1px;
  height: 100%;
  background: -webkit-linear-gradient(top, #e8e8e8 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  float: right;
}

.sidebar-bottom-spacer{
  height: 30%;
}

.menu {
  padding-left: 25px;
  white-space: nowrap;
  border-right: 1px solid #e8e8e8;
}

.sidebar.collapsed .menu > ul {
  opacity: 0;
}

.menu ul{
  list-style-type: none;
  padding-left: 0;
  margin-left: 10px;
  font-size: 15px;
}

.menu ul.active {
  padding-top: 5px;
  padding-bottom: 5px;
}

.menu li {
  cursor: pointer;
}

.menu li.selected:before {
  content: "» ";
  display: inline-block;
  width: 10px;
}

.menu > ul {
  opacity: 1;
  margin:0;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}

#content {
  margin-left: 300px;
  margin-right: 100px;
}

.component-header{
  border-bottom: #e8e8e8 1px solid;
  margin-bottom: 3px;
}

.component-header p {
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}

.component-header .load-spinner{
  float: right;
  margin-top: 10px;
}

.clear {
  clear: both;
}

/* Metadata component */

.metadata{
  width: 320px;
}

.metadata .ui-autocomplete-input {
  width: auto;
}
/* loading spinner */

.followingBallsGParent{
  position:relative;
  width:100px;
  height:8px;
}

.followingBallsG{
  background-color:#FFFFFF;
  position:absolute;
  top:0;
  left:0;
  width:8px;
  height:8px;
  -moz-border-radius:4px;
  -moz-animation-name:bounce_followingBallsG;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-direction:linear;
  -webkit-border-radius:4px;
  -webkit-animation-name:bounce_followingBallsG;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:linear;
  -o-border-radius:4px;
  -o-animation-name:bounce_followingBallsG;
  -o-animation-duration:2s;
  -o-animation-iteration-count:infinite;
  -o-animation-direction:linear;
  -ms-border-radius:4px;
  -ms-animation-name:bounce_followingBallsG;
  -ms-animation-duration:2s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-direction:linear;
  border-radius:4px;
  animation-name:bounce_followingBallsG;
  animation-duration:2s;
  animation-iteration-count:infinite;
  animation-direction:linear;
}

.followingBallsG_1{
  -moz-animation-delay:0s;
  -webkit-animation-delay:0s;
  -o-animation-delay:0s;
  -ms-animation-delay:0s;
  animation-delay:0s;
}

.followingBallsG_2{
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -ms-animation-delay:0.2s;
  animation-delay:0.2s;
}

.followingBallsG_3{
  -moz-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -ms-animation-delay:0.4s;
  animation-delay:0.4s;
}

.followingBallsG_4{
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -ms-animation-delay:0.6s;
  animation-delay:0.6s;
}

@-moz-keyframes bounce_followingBallsG{
  0%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }

  25%{
    width: 6px; height: 6px;
    background-color:#EBEBEB;
  }

  50%{
    width: 8px; height: 8px;
    left:93px;
    background-color:#444444;
  }

  75%{
    width: 9px; height: 9px;
    background-color:#212121;
  }

  100%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }
}

@-webkit-keyframes bounce_followingBallsG{
  0%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }

  25%{
    width: 6px; height: 6px;
    background-color:#EBEBEB;
  }

  50%{
    width: 8px; height: 8px;
    left:93px;
    background-color:#444444;
  }

  75%{
    width: 9px; height: 9px;
    background-color:#212121;
  }

  100%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }
}

@-o-keyframes bounce_followingBallsG{
  0%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }

  25%{
    width: 6px; height: 6px;
    background-color:#EBEBEB;
  }

  50%{
    width: 8px; height: 8px;
    left:93px;
    background-color:#444444;
  }

  75%{
    width: 9px; height: 9px;
    background-color:#212121;
  }

  100%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }
}

@-ms-keyframes bounce_followingBallsG{
  0%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }

  25%{
    width: 6px; height: 6px;
    background-color:#EBEBEB;
  }

  50%{
    width: 8px; height: 8px;
    left:93px;
    background-color:#444444;
  }

  75%{
    width: 9px; height: 9px;
    background-color:#212121;
  }

  100%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }
}

@keyframes bounce_followingBallsG{
  0%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }

  25%{
    width: 6px; height: 6px;
    background-color:#EBEBEB;
  }

  50%{
    width: 8px; height: 8px;
    left:93px;
    background-color:#444444;
  }

  75%{
    width: 9px; height: 9px;
    background-color:#212121;
  }

  100%{
    width: 8px; height: 8px;
    left:0px;
    background-color:#444444;
  }
}

/* GridView */

.grid-hidden{
  display: none;
}

.grid-table{
  margin: 0;
  font-size: 14px;
}

.grid-cell-sortable {
  background-image: url('/assets/icons.png');
  background-repeat: no-repeat;
  background-position: -145px -197px;
  height: 16px;
  width: 16px;
  padding-left: 4px;
  cursor: ns-resize;
}

.grid-cell-select {
  width: 2px;
}

td.grid-cell-row-type {
  width: 6px;
  border-left: white solid 4px;
}

.ui-selecting .grid-cell-select {
  background-color: #FFA366;
}

.ui-selected .grid-cell-select {
  background-color: #FF6600;
}

.grid-cell-editable input {
  margin: 0;
}

.grid-cell-editable div {
  cursor: cell;
}

.column-right-justified {
  text-align: right;
}

.row-failed-validation {
  background-color: #FDF0F0;
}

/* HierarchyBrowser */

.hierarchy-browser{
  width: 320px;
}

.hierarchy-browser select {
  width: 100%;
}

.hb-folder td:nth-child(2):before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url(/assets/icons.png) -239px -231px no-repeat;
}

/* Tree */

.tree .dynatree-container {
  border: none;
}

/* thumbnails */

.fixed-square-140 {
  height: 140px;
  width: 140px;
}

.thin-border {
  border: 1px solid black;
}

.thin-border-active {
  border: 1px solid orange;
}

li.pf-thumbnail div img
{
    max-width: 138px;
    max-height: 138px;
}

/* panorama grid view */

.panorama {
  overflow: hidden;
}

.panorama .row.window {
  -moz-transition: margin-left 1s, -moz-transform 1s;
  -webkit-transition: margin-left 1s, -webkit-transform 1s;
  -o-transition: margin-left 1s, -o-transform 1s;
  transition: margin-left 1s, transform 1s;
}

.panorama .row.window .dimmed {
  -moz-transition: opacity 1s, -moz-transform 1s;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -o-transition: opacity 1s, -o-transform 1s;
  transition: opacity 1s, transform 1s;
  opacity: .3;
}

/* mask */
.mask {
  position:           absolute;
  z-index:            1;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  background-color:   rgba(0,0,0,0.15);
}

/* orders */
.order {
    margin-bottom: 2em;
}